import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';
import ReactNative, {
  Image,
  StyleSheet,
  View
} from 'react-native';

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
// const flattenStyle = require('flattenStyle');
import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle'
import ReadImageManager from './ReadImageManager'

export default class AutoRotateImageView extends Component {

  static defaultProps = {
    enableAutoRotate: true,
  };  // 注

  static propTypes = {
    ...Image.propTypes,

    /**
     * 是否自适应(旋转)纠正图片方向
     */
    enableAutoRotate: PropTypes.bool,
  }

  constructor(props) {
    super(props);
    this.state = {
      rotateZ: 0
    }
    this.source;
    this.style;
    this.sources;
  }

  componentDidMount() {
    this.readPictureDegree();
  }

  componentWillReceiveProps() {
    this.readPictureDegree();
  }

  readPictureDegree = (uri = this.props.source && this.props.source.uri) => {
    if (this.props.enableAutoRotate && uri) {//等于true的时候，才会获取角度信息
      this.setState({
        rotateZ: 360
      });
      ReadImageManager.readPictureDegree(uri)
          .then(result => {
            //安卓返回的角度旋转方向和RN的rotateZ旋转方向相反，所以需要
            this.setState({
              rotateZ: 360 - result
            });
          })
          .catch(e => {
            console.log(e);
          });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.source.uri != this.props.source.uri){
      this.readPictureDegree(nextProps.source.uri);
    }
    return true;
  }

  render() {

    this.source = resolveAssetSource(this.props.source) || {uri: undefined, width: undefined, height: undefined};
    this.style;
    this.sources;
    if (Array.isArray(this.source)) {
      this.style = flattenStyle([styles.base, this.props.style]) || {};
      this.sources = this.source;
    } else {
      const {width, height, uri} = this.source;
      this.style = flattenStyle([{width, height}, styles.base, this.props.style]) || {};
      this.sources = [this.source];

      if (uri === '') {
        console.warn('source.uri should not be an empty string');
      }
    }

    let transformStyle = {
      transform: [{rotateZ: this.state.rotateZ + 'deg'}]
    };
    // console.log("rotateZ:"+this.state.rotateZ +'||'+this.source.uri);

    const resizeMode = this.props.resizeMode || (this.style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108
    const tintColor = (this.style || {}).tintColor; // Workaround for flow bug t7737108

    if (this.props.src) {
      console.warn('The <AutoRotateImageView> component requires a `source` property rather than `src`.');
    }
    return (
        <Image
            {...this.props}
            style={[this.style, transformStyle]}
            resizeMode={resizeMode}
            tintColor={tintColor}
            source={this.sources}
        />
    );
  }
}

const styles = StyleSheet.create({
  base: {
    overflow: 'hidden',

  },
});
